<script setup >
import {onMounted,ref} from 'vue'
import {getTaskListApi} from '@/apis/task'
import COS from 'cos-js-sdk-v5'
// 腾讯云设置
let cos = new COS({
    SecretId: 'AKIDVB3mJtLsGTZVbVDoDPOTQNH2hAQUKwQj',
    SecretKey: 'ApIdqrddR7ZmtVq4DHD1tnW7XqzznQrd'
})

const scrolFlag = ref(false)

const taskList = ref({})

const isEmpty = ref(false)

onMounted(() => {
  getTaskList()
})

const getTaskList = async() => {
  const res = await getTaskListApi({status:2})
  taskList.value = res.data
  isEmpty.value = taskList.value.items?false:true
  console.log(taskList.value);
}

const onRefreshScroll = async() => {
  scrolFlag.value = true
  await getTaskList()
   scrolFlag.value = false
}

  // 打开地图
  const imgUrlList = ref([])
  function selectImg(e) {

    const file = e.tempFiles[0].file
    console.log(e);
    cos.uploadFile({
      Bucket:'hr-project-1326638452',
      Region:'ap-nanjing',
      Key:e.tempFiles[0].name,
      Body:file,
      SliceSize: 1024 * 1024 * 5
    }).then((data) => {
      console.log('上传成功',data);
      imgUrlList.value.push({
        url:data.Location
      })
      console.log(imgUrlList.value,'@@@');
    }).catch((err) => {
      console.log('上传出错',err);
    })

  }

  const delImg = (e) => {
    console.log(e);
    cos.deleteObject({
      Bucket:'hr-project-1326638452',
      Region:'ap-nanjing',
      Key:e.tempFile.name,
    }).then((data) => {
      console.log('删除成功',data);
      console.log(imgUrlList.value,'bbb');
    }).catch((err) => {
      console.log('上传出错',err);
    })
  }

</script>
<template>
  <scroll-view scroll-y @refresherrefresh="onRefreshScroll" :refresher-triggered="scrolFlag" refresher-enabled class="scroll-view">
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for="(item) in taskList.items" :key="item.id" >
        <navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${item.id}`">
          <view class="header">
            <text class="no">任务编号: {{ item.transportTaskId }}</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line"
                >{{ item.startAddress }}</view
              >
              <view class="line">{{ item.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ item.created }}</view>
          <navigator
          v-if="item.status === 2"
            hover-class="none"
            :url="`/subpkg_task/delivery/index?id=${item.id}`"
            class="action"
          >
            交付
          </navigator>
          <!-- status为4的时候为回车登记 -->
          <navigator
          v-if="item.status === 4"
            hover-class="none"
            :url="`/subpkg_task/record/index?transportTaskId=${item.transportTaskId}&actualDepartureTime=${item.actualDepartureTime}`"
            class="action"
          >
            回车登记
          </navigator>
        </view>
      </view>
      <view v-if="isEmpty" class="task-blank">无在途货物</view>
      <uni-list>
        <uni-list-item
            :border="false"
            style="margin-top: -30rpx"
            direction="column"
            title="上传图片（最多6张）"
          >
            <template v-slot:footer>
              <uni-file-picker v-model="imgUrlList" fileMediatype="image" limit="6" @select="selectImg" @delete="delImg" ></uni-file-picker>
            </template>
          </uni-list-item>
      </uni-list>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
